<template>
    <page class="apply-agent">
        <v-back/>
        <div class="form-group">
            <van-cell-group>
                <van-field size="large" v-model="params.realName" placeholder="请输入您的姓名">
                    <div slot="label" class="label">
                        <span>您的姓名</span>
                        <i class="required">*</i>
                    </div>
                </van-field>
                <van-field size="large" type="number" placeholder="请输入您的身份证" maxlength="18" v-model="params.idCardNumber">
                    <div slot="label" class="label">
                        <span>身份证号</span>
                        <i class="required">*</i>
                    </div>
                </van-field>
                <change-cell label="您的电话" :value="params.phone"  btnTxt="修改" @changeBtn="changeTel"></change-cell>

                <div class="cell-item">
                    <span class="cell-item-key">验证码<i class="required">*</i></span>
                    <div class="cell-item-value">
                        <div class="input">
                            <input type="number" placeholder="请输入验证码" v-model="params.code"/>
                        </div>
                        <div class="change">
                            <a href="javascript: void (0)" @click="sendCode" v-if="!isSend">发送验证码</a>
                            <a href="javascript: void (0)" @click="sendCode" v-else>{{time}}s</a>
                        </div>
                    </div>
                </div>




                <!--<van-field size="large" v-model="value">
                    <div slot="label" class="label">
                        <span>选择类型</span>
                        <i class="required">*</i>
                    </div>
                    <div slot="input" style="flex: 1;display: flex;align-items: center">
                        <van-radio v-model="type" name="1">个人代理</van-radio>
                        <van-radio style="margin-left: 15px" v-model="type" name="2">企业代理</van-radio>
                    </div>
                </van-field>-->
                <van-field size="large" style="overflow-y: auto" v-if="type == 2">
                    <div slot="label" class="label">
                        <span>企业客户</span>
                        <i class="required">*</i>
                    </div>
                    <auto-complete slot="input" style="flex: 1;" placeholder="至少输入4个字" @handle-choose="chooseCompany"></auto-complete>
                </van-field>
            </van-cell-group>
        </div>
        <a href="javascript: void (0);" class="a-btn" @click="submit">提交申请</a>
    </page>
</template>

<script>
    import AutoComplete from '@/components/autoComplete.vue'
    import ChangeCell from '@/components/changeCell.vue'
    import {mapGetters} from 'vuex'
    const TIME = 60;
    export default {
        components: {AutoComplete,ChangeCell},
        computed: {...mapGetters(['wxInfo','userInfo'])},
        data() {
            return {
                time: TIME,
                step: 1,
                value: '',
                areaList: areaList,
                show: false,
                type: 2,
                isSend: false,
                params: {
                    code: '',
                    realName: '',
                    companyKeyNo: '',
                    idCardNumber: '',
                    phone: '13800138000'
                }
            }
        },
        created(){
            this.params.phone = this.userInfo.phone;
        },
        methods: {

            //发送验证码
            async sendCode(){
                if(!this.params.phone) return this.$toast.error('请输入手机号');
                try {
                    return await this.sendPhone(this.params.phone);
                    this.isSend = true;
                    this.cuntDown();

                }catch (e) {
                    this.$toast.error(e.response.data.errorMessage);
                }
            },

            //倒计时
            cuntDown(){
                var interval = setInterval(_ => {
                    if(this.time > 1){
                        this.time --;
                    }else {
                        this.time = TIME;
                        this.isSend = false;
                        clearInterval(interval);
                    }
                },1000);
            },


            //选择公司
            chooseCompany(res){
                this.params.companyKeyNo = res.keyNo;
            },


            //修改手机号
            changeTel(){
                this.$router.push('/validate');
            },
            async submit() {
                let result = true, msg = '';
                if(!this.params.realName){
                    msg = '请输入您的名称';
                    result = false;
                }else if(!this.params.idCardNumber){
                    msg = '请输入身份证号';
                    result = false;
                }else if(!this.params.code){
                    msg = '请输入验证码';
                    result = false;
                }else if(!this.params.companyKeyNo){
                    msg = '请选择企业';
                    result = false;
                }
                if(!result) return this.$toast.error(msg);
                try {
                    this.$loading();
                    const res = await this.$http.post('/mp/user/registerProxy', this.params);
                    this.$toast.success('提交成功');
                    localStorage.setItem('userinfo', JSON.stringify(res.data));
                    this.SET_USERINFO(res.data);
                    this.$router.go(-2);
                }catch (e) {
                    this.$toast.error('请求失败');
                }finally {
                    this.$loading.close();
                }



            },

            searchComplany(e){
                console.log(e.target.value.length);
            }
        }
    }
</script>

<style scoped lang="less">
    .apply-agent{
        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-y: auto;
            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
                /* WebKit browsers */
                color: #ccc;
            }

            .label {
                display: flex;
                align-items: flex-start;

                span {
                    font-size: @large;
                }
                .input{
                    color: #ccc;
                    border: none;
                    outline: none;
                    width: 100%
                }

                .required {
                    color: red;
                    font-size: @md;
                    margin-top: -3px;
                }
            }
            .input{
                &::placeholder{
                    color: #ccc;
                }
                color: #333;
                border: none;
                outline: none;
                width: 100%
            }

            .reset {
                font-size: @mini;
                color: @theme-color;
                border: 1px solid @theme-color;
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: .25rem;
                width: .55rem;
            }


        }

        .cell-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: .48rem;
            padding: 0 @padding;
            .required {
                color: red;
                font-size: @md;
                margin-top: -3px;
            }
            &-key{
                display: block;
                width: .85rem;
                min-width: .85rem;
                text-align: left;
                color: #333;
                font-size: @large;
            }
            &-value{
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .input{
                    flex: 1;
                    >input{
                        width: 100%;
                    }
                }
                input{
                    color: #333;
                    font-size: @large;
                    outline: none;
                    border: none;
                    height: 100%;
                    &::placeholder{
                        color: #ccc;
                        font-size: @large;
                    }
                }
                .change{
                    width: 1rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: .22rem;
                    border-left: 1px solid @border-color;
                    a{
                        color: #1677FF;
                        font-size: @large;
                        font-weight: 400;
                    }
                }
            }
        }
    }
</style>

<style>
    .van-cell{
        overflow: auto;
    }
</style>
